<script type="text/javascript" src="../../js/DataTables-1.9.4/media/js/jquery.dataTables.js" ></script>
<link rel="stylesheet" type="text/css" href="../../js/DataTables-1.9.4/media/css/jquery.dataTables.css" />
<fieldset>
	<legend></legend>
	<table width="90%" align="center">
		<tr>
			<td width="29%" valign="top"><div align="left">
					<strong>Composici&oacute;n</strong>
				</div></td>
			<td width="71%"><div align="center">
					<strong>Tama&ntilde;</strong><strong>o</strong>
				</div></td>
			<td width="71%"><div align="center">
					<strong>Cantidad/Proporci&oacute;n</strong>
				</div></td>
			<td width="71%">&nbsp;</td>
		</tr>
		<tr>
			<td valign="top"><?php echo cmbCodigo("particulasAdd", $codParticulas); ?>
			</td>
			<td valign="top"><div align="center">
					<?php echo cmbCodigo("tamanioAdd", $codTamanioPartDep); ?>
				</div></td>
			<td valign="top"><div align="center">
					<input name="propocionAdd" id="propocionAdd" type="text" size="3" class="styleinputnormal"
						maxlength="3" />
				</div></td>
			<td valign="top">
				<div align="center">
					<input type="button" name="addComposicion" value="Agregar"
						onclick="agregarParticula();" />
				</div>
			</td>
		</tr>
	</table>
	<br />
	<table width="90%" align="center" border="0" id="tablaParticulas">
		<thead>
			<tr>
				<th width="19%">Composici&oacute;n</th>
				<th width="19%">Tama&ntilde;o</th>
				<th width="30%">Cantidad/Proporci&oacute;n</th>
				<th width="16%">&nbsp;</th>
				<th width="16%">&nbsp;</th>
			</tr>
		</thead>
		<tbody>
			<?php 
			if($codUe) {
						$i = 0;
						$oComposicionBN = new ComposicionBN();
						$particulas = $oComposicionBN->obtenerComposicion($codUe, $codParticulas);
						$oCodigosBN = new CodigosBN();
						if(is_array($particulas)) {
							foreach($particulas as $particula) {
								echo "<tr>";
								echo "<td>";
								echo "<input type='hidden' name='particulas[]' value='".$particula->getCodComponente()."' />";
								echo $oCodigosBN->obtenerCodigo($codParticulas, $particula->getCodComponente())->getDescripcion();
								echo "</td>";
								echo "<td>";
								echo "<input type='hidden' name='tamanios[]' value='".$particula->getCodTamanio()."' />";
								echo $oCodigosBN->obtenerCodigo($codTamanioPartDep, $particula->getCodTamanio())->getDescripcion();
								echo "</td>";
								echo "<td>";
								echo "<input type='hidden' name='proporciones[]' value='".$particula->getProporcion()."' />".$particula->getProporcion();
								echo "</td>";
								echo "<td><a href='#' onclick=seleccionaParticula(this.parentNode,'".$particula->getCodComponente()."','".$particula->getCodTamanio()."','".$particula->getProporcion()."') >Editar</a></td>";
								echo "<td><a href='#' onclick='remove_particula(this.parentNode )'>Eliminar</a></td>";
								echo "</tr>";
								$i++;
							}
						}
					}
					?>
		</tbody>
	</table>
	<br />
	<table width="90%" align="center">
		<tr>
			<td valign="top">Observaciones</td>
			<td colspan="2">
				<div align="left">
					<textarea name="txtParticulas" id="txtParticulas" cols="40" class="styletextareaLargaUE" 
						rows="3"><?php echo $propsUE[$codTexto][$codParticulas] ?></textarea>
				</div>
			</td>
		</tr>
	</table>
</fieldset>

<script type="text/javascript">
<!--

	
function agregarParticula() {
	var particula_text = $("#particulasAdd :selected").text();
	var particula_val = $("#particulasAdd :selected").val();	
	
	var tamanio_text = $("#tamanioAdd :selected").text();
	var tamanio_val = $("#tamanioAdd :selected").val();	
	
	var proporcion_val = $("#propocionAdd").val();
	var n = $('#contt').val();
	$('#tablaParticulas').dataTable().fnAddData( [
		"<input type='hidden' name='particulas[]' value='" + particula_val + "' />" + particula_text, 
        "<input type='hidden' name='tamanios[]' value='" + tamanio_val + "' />" + tamanio_text, 
        "<input type='hidden' name='proporciones[]' value='" + proporcion_val + "' />" + proporcion_val,
		"<a href='#' onclick=seleccionaParticula(this.parentNode,"+ particula_val + "," + tamanio_val + "," + proporcion_val + ") >Editar</a>",
		"<a href='#' onclick='remove_particula(this.parentNode )'>Eliminar</a>"		
	] ); 
	n++;
	 $('#contt').val(n);
}

function remove_particula(el) {

	 $(document).ready(function() {

		  var oTable = $('#tablaParticulas').dataTable();
		  var aPos = oTable.fnGetPosition( el );
		  var i = aPos[0];
		  oTable.fnDeleteRow(i);
		  
	  } );
}


function seleccionaParticula(el,particula_val, tamanio_val,proporcion_val ) {

	$("#particulasAdd").val(particula_val);	
	$("#tamanioAdd").val(tamanio_val);	
	$("#propocionAdd").val(proporcion_val);

	remove_particula(el);
}

$(function() {
	 
	$( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
	$( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );

	$('#tablaParticulas').dataTable(
			{ 
				"bFilter": false ,
				"bLengthChange": false ,
				"bInfo": false , 
				"bPaginate": false,
				"oLanguage": { 'sEmptyTable': 'No hay datos para mostrar'  }				
			}
		);
	
});
//-->
</script>